<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import SelectIcons from './components/SelectIcons.vue'

import useStore from '../../store'
import { Option } from '../../types/ItemMetaTypes'
import { ComputedRef, Ref } from '@vue/reactivity'

let formData = computed(() => useStore.state.FormData.data)
let formItem = computed(() => useStore.state.FormItems.currentItem)

// 包含最小数量的组件
const mins: Array<string> = ['Checkbox', 'InputNumber', 'Slider']
// 包含最大数量的组件
const maxs: Array<string> = ['Checkbox', 'InputNumber', 'Rate', 'Slider']
// 包含步长属性的组件
const steps: Array<string> = ['InputNumber', 'Slider']
// 包含显示边框属性的组件
const borders: Array<string> = ['Checkbox', 'Radio']
// 不包含size的组件
const noSizes: Array<string> = ['Rate', 'Switch', 'Slider', 'Checkbox', 'Radio', 'Container']
// 包含选项的组件
const options: Array<string> = ['Checkbox', 'Radio', 'VirtualizedSelect', 'Select']
// 包含可清除的组件
const clearables: Array<string> = [
    'Input',
    'Select',
    'VirtualizedSelect',
    'TimePicker',
    'TimePickerRange',
    'DatetimePicker',
]
// 包含多选的组件
const multipleList: Array<string> = ['Select', 'VirtualizedSelect']
// 包含可筛选的组件
const filterableList: Array<string> = ['Select', 'VirtualizedSelect']
// 包含无数据提示文字的组件
const noDataTexts: Array<string> = ['Select', 'VirtualizedSelect']
// 包含同一宽度的组件
const fitInputWidthList: Array<string> = ['Select', 'VirtualizedSelect']
// 包含时间格式的组件
const formats: Array<string> = ['TimePicker', 'TimePickerRange', 'DatetimePicker']
// 包含开始时间提示的组件
const startPlaceholders: Array<string> = ['TimePickerRange', 'DatetimePicker']
// 包含结束时间提示的组件
const endPlaceholders: Array<string> = ['TimePickerRange', 'DatetimePicker']
// 包含分隔符的组件
const rangeSeparators: Array<string> = ['TimePickerRange', 'DatetimePicker']
// 包含前缀图标的组件
const prefixIcons: Array<string> = [
    'Input',
    'Password',
    'TimePicker',
    'TimePickerRange',
    'TimeSelect',
    'DatetimePicker',
]
// 包含清除图标的组件
const clearIcons: Array<string> = ['TimePicker', 'TimePickerRange', 'TimeSelect', 'DatetimePicker']
// 包含后缀图标的组件
const suffixIcons: Array<string> = ['Input', 'Password']
// 包含可输入的组件
const editables: Array<string> = ['TimePicker', 'TimePickerRange', 'TimeSelect', 'DatetimePicker']
// 包含描述文字的组件
const placeholders: Array<string> = ['Input', 'Textarea', 'Password', 'Select', 'VirtualizedSelect', 'TimePicker']
// 包含只读的组件
const readonlyList: Array<string> = ['Input', 'Textarea', 'Password', 'TimePicker', 'TimePickerRange', 'DatetimePicker']

// 控制选择图标是否显示
const showSelectIcon = ref({ dialogVisible: false })
// 控制选择图标是否显示
const whichSelectIcon: Ref<string> = ref('')
// 控制开关显示文字或图标 true 图l标， false 文字
const switchIconText: Ref<boolean> = ref(true)
// 控制开关值类型 1=字符串 2=布尔值 3=整形
const switchValueType: Ref<number> = ref(2)
// 无提示文字的组件
const noTexts: Ref<Array<string>> = ref(['Button', 'Container'])
// 无校验的组件
const noRules: Ref<Array<string>> = ref(['Button', 'Container'])
// 选择校验类型弹框状态
const selectCheckTypeDialog: Ref<boolean> = ref(false)
// 校验类型
const checkType: Ref<number> = ref(0)

// 控制开关布尔值选项
const switchValueOptions: Ref<Array<Option>> = ref([
    {
        value: true,
        label: 'true',
    },
    {
        value: false,
        label: 'false',
    },
])

// 控制开关布尔值选项
const checkTypeOptions: Ref<Array<Option>> = ref([
    {
        value: 'email',
        label: 'email格式',
    },
    {
        value: 'url',
        label: 'url格式',
    },
    {
        value: 'date',
        label: 'date格式',
    },
])
// 尺寸选项
const sizeOptions: Ref<Array<Option>> = ref([
    {
        value: 'medium',
        label: '普通',
    },
    {
        value: 'small',
        label: '小',
    },
    {
        value: 'mini',
        label: '迷你',
    },
])
// 按钮类型选项
const buttonTypeOptions: Ref<Array<Option>> = ref([
    {
        value: '',
        label: '默认',
    },
    {
        value: 'primary',
        label: 'Primary',
    },
    {
        value: 'success',
        label: 'Success',
    },
    {
        value: 'info',
        label: 'Info',
    },
    {
        value: 'warning',
        label: 'Warning',
    },
    {
        value: 'danger',
        label: 'Danger',
    },
    {
        value: 'text',
        label: 'Text',
    },
])
// 颜色选择器格式
const colorFormatOptions: Ref<Array<Option>> = ref([
    {
        value: 'hsl',
        label: 'hsl',
    },
    {
        value: 'hsv',
        label: 'hsv',
    },
    {
        value: 'hex',
        label: 'hex',
    },
    {
        value: 'rgb',
        label: 'rgb',
    },
])
// 垂直排列方式
const alignOptions: Ref<Array<Option>> = ref([
    {
        value: 'top',
        label: 'top',
    },
    {
        value: 'middle',
        label: 'middle',
    },
    {
        value: 'bottom',
        label: 'bottom',
    },
])
// 水平排列方式
const justifyOptions: Ref<Array<Option>> = ref([
    {
        value: 'start',
        label: 'start',
    },
    {
        value: 'end',
        label: 'end',
    },
    {
        value: 'center',
        label: 'center',
    },
    {
        value: 'space-around',
        label: 'space-around',
    },
    {
        value: 'space-between',
        label: 'space-between',
    },
])
// 日期时间选择器类型
const typeOptions: Ref<Array<Option>> = ref([
    {
        value: 'year',
        label: '年',
    },
    {
        value: 'month',
        label: '月',
    },
    {
        value: 'monthrange',
        label: '月范围',
    },
    {
        value: 'date',
        label: '日期',
    },
    {
        value: 'daterange',
        label: '日期范围',
    },
    {
        value: 'datetime',
        label: '日期时间',
    },
    {
        value: 'datetimerange',
        label: '日期时间范围',
    },
    {
        value: 'week',
        label: '周',
    },
])

let showRangeSeparator: ComputedRef<boolean> = computed(
    () =>
        formItem.value.type !== 'DatetimePicker' ||
        (formItem.value.type === 'DatetimePicker' &&
            (formItem.value.props.type === 'datetimerange' ||
                formItem.value.props.type === 'daterange' ||
                formItem.value.props.type === 'monthrange'))
)

// 选择项
const itemOptions: Ref<Array<Option>> = ref([])

// 当前item更换之后处理选择项
watch(
    () => formItem.value,
    () => {
        itemOptions.value =
            formItem.value.type !== 'VirtualizedSelect' ? formItem.value.options : formItem.value.props.options
    }
)

// 添加选项
const insertOption = () => {
    itemOptions.value.push({
        label: '',
        value: '',
    })
}

// 删除选项
const removeOption = (i: number) => {
    itemOptions.value.splice(i, 1)
}

// 显示辅助文字状态切换
const showTextChange = (val: boolean) => {
    if (val) {
        formItem.value.props.showScore = !val
    }
}

// 日期时间选择器类型切换
const typeChange = () => {
    // @ts-ignore
    formData.value[formItem.value.modelValue] = undefined
    // @ts-ignore
    if (formItem.value.props.type === 'year') {
        // @ts-ignore
        formItem.value.props.format = 'YYYY'
    }
    // @ts-ignore
    if (formItem.value.props.type === 'month') {
        // @ts-ignore
        formItem.value.props.format = 'MM'
    }
    // @ts-ignore
    if (formItem.value.props.type === 'date') {
        // @ts-ignore
        formItem.value.props.format = 'YYYY-MM-DD'
    }
    // @ts-ignore
    if (formItem.value.props.type === 'daterange') {
        // @ts-ignore
        formItem.value.props.format = 'YYYY-MM-DD'
    }
    // @ts-ignore
    if (formItem.value.props.type === 'datetime') {
        // @ts-ignore
        formItem.value.props.format = 'YYYY-MM-DD HH:mm:ss'
    }
    // @ts-ignore
    if (formItem.value.props.type === 'datetimerange') {
        // @ts-ignore
        formItem.value.props.format = 'YYYY-MM-DD HH:mm:ss'
    }
    // @ts-ignore
    if (formItem.value.props.type === 'week') {
        // @ts-ignore
        formItem.value.props.format = '[Week] ww'
    }
}

// 显示分数状态切换
const showScoreChange = (val: boolean) => {
    if (val) {
        // @ts-ignore
        formItem.value.props.showText = !val
    }
}

// 多选状态切换
const multipleChange = (val: boolean) => {
    if (val) {
        // @ts-ignore
        formData.value[formItem.value.modelValue] = [formData.value[formItem.value.modelValue]]
    } else {
        // @ts-ignore
        formData.value[formItem.value.modelValue] =
            formItem.value.type !== 'VirtualizedSelect'
                ? formItem.value.options[0].value
                : formItem.value.props.options[0].value
    }
}

// 开启验证状态切换
const enableRuleChange = (val: boolean) => {
    if (val) {
        formItem.value.rules = ref([])
    } else {
        delete formItem.value.rules
    }
}

// 显示选择图标状态切换
const showSelectIconFun = (which: string) => {
    showSelectIcon.value.dialogVisible = true
    whichSelectIcon.value = which
}

// 显示选择图标状态切换
const selectIcon = (name: string): void => {
    showSelectIcon.value.dialogVisible = false
    // @ts-ignore
    formItem.value.props[whichSelectIcon.value] = name
}

// 选择图标或文字
const SwitchIconText = (icon: boolean): void => {
    switchIconText.value = icon
    if (!icon) {
        // @ts-ignore
        formItem.value.props.activeIcon = ''
        // @ts-ignore
        formItem.value.props.inactiveIcon = ''
    }
}

// 显示检验规则选择
const showSelectCheckType = (): void => {
    selectCheckTypeDialog.value = true
}

// 根据类型添加验证
const addRuleByType = (): void => {
    if (!formItem.value.rules) {
        return
    }
    if (checkType.value === 0) {
        formItem.value.rules.push({
            required: true,
            message: '不能为空',
            trigger: 'blur',
            checkType: 'required',
        })
    } else if (checkType.value === 1) {
        formItem.value.rules.push({
            checkType: 'regexp',
            pattern: '/^[a-z]+$/',
            message: '正则',
            trigger: 'blur',
        })
    } else if (checkType.value === 2) {
        formItem.value.rules.push({
            min: 3,
            max: 5,
            message: '长度必须在3和5之间',
            trigger: 'blur',
            checkType: 'length',
        })
    } else if (checkType.value === 3) {
        formItem.value.rules.push({
            type: 'email',
            message: '必须是邮箱格式',
            trigger: 'blur',
            checkType: 'email',
        })
    } else if (checkType.value === 4) {
        formItem.value.rules.push({
            type: 'url',
            message: '必须是url格式',
            trigger: 'blur',
            checkType: 'url',
        })
    } else if (checkType.value === 5) {
        formItem.value.rules.push({
            type: 'date',
            message: '必须是date格式',
            trigger: 'blur',
            checkType: 'date',
        })
    }
    selectCheckTypeDialog.value = false
}

// 移除一列
const removeCol = (i: number): void => {
    formItem.value.cols.splice(i, 1)
}

// 移除校验
const removeCheck = (i: number): void => {
    formItem.value.rules.splice(i, 1)
}

// 根据校验类型获取文字
const getTextByCheckType = (checkType: string): string => {
    let text = ''
    switch (checkType) {
        case 'required':
            text = '必填'
            break
        case 'regexp':
            text = '正则'
            break
        case 'length':
            text = '长度限制'
            break
        case 'email':
            text = '邮箱格式'
            break
        case 'url':
            text = 'url格式'
            break
        case 'date':
            text = 'date格式'
            break
    }
    return text
}

// 添加一列
const addCol = (): void => {
    formItem.value.cols.push({
        props: {
            span: 12,
            pull: 0,
            push: 0,
            offset: 0,
        },
        formItems: [],
    })
}

// 选择值类型
const SwitchValueType = (value: number): void => {
    if (switchValueType.value === value) {
        return
    }
    if (value === 1) {
        // @ts-ignore
        formItem.value.props.activeValue = '开'
        // @ts-ignore
        formItem.value.props.inactiveValue = '关'
    } else if (value === 2) {
        // @ts-ignore
        formItem.value.props.activeValue = true
        // @ts-ignore
        formItem.value.props.inactiveValue = false
    } else {
        // @ts-ignore
        formItem.value.props.activeValue = 1
        // @ts-ignore
        formItem.value.props.inactiveValue = 0
    }
    switchValueType.value = value
}
</script>

<template>
    <el-form v-if="formItem.type" :model="formItem" size="medium" label-width="70px">
        <!-- base -->
        <el-form-item label="字段名" v-if="!noTexts.includes(formItem.type)">
            <el-input v-model="formItem.modelValue" />
        </el-form-item>
        <el-form-item label="标题" v-if="formItem.type !== 'Container'">
            <el-input v-model="formItem.label" />
        </el-form-item>
        <el-form-item v-if="formItem.type !== 'Container'" :label="formItem.type === 'Rate' ? '只读' : '禁用'">
            <el-switch v-model="formItem.props.disabled" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type !== 'Container'" label="标签宽度">
            <el-input-number :min="0" :max="600" :step="10" v-model="formItem.labelWidth" />
        </el-form-item>
        <!-- 动态属性 -->
        <el-form-item v-if="!noSizes.includes(formItem.type)" label="尺寸">
            <el-select v-model="formItem.props.size">
                <el-option
                    v-for="item in sizeOptions"
                    :key="item.value + '+'"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Button'" label="类型">
            <el-select v-model="formItem.props.type">
                <el-option
                    v-for="item in buttonTypeOptions"
                    :key="item.value + '+'"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Button'" label="按钮用途">
            <el-radio-group v-model="formItem.buttonType">
                <el-radio label="submit"> 提交 </el-radio>
                <el-radio label="reset"> 重置 </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item v-if="placeholders.includes(formItem.type)" label="描述属性">
            <el-input v-model="formItem.props.placeholder" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'DatetimePicker'" label="类型">
            <el-select v-model="formItem.props.type" @change="typeChange">
                <el-option
                    v-for="item in typeOptions"
                    :key="item.value + '+'"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="startPlaceholders.includes(formItem.type)" label="开始描述">
            <el-input v-model="formItem.props.startPlaceholder" />
        </el-form-item>
        <el-form-item v-if="endPlaceholders.includes(formItem.type)" label="结束描述">
            <el-input v-model="formItem.props.endPlaceholder" />
        </el-form-item>
        <el-form-item v-if="formats.includes(formItem.type)" label="时间格式">
            <el-input v-model="formItem.props.format" />
        </el-form-item>
        <el-form-item v-if="rangeSeparators.includes(formItem.type) && showRangeSeparator" label="分隔符">
            <el-input :maxlength="1" v-model="formItem.props.rangeSeparator" />
        </el-form-item>
        <el-form-item v-if="noDataTexts.includes(formItem.type)" label="无数据">
            <el-input v-model="formItem.props.noDataText" />
        </el-form-item>
        <el-form-item v-if="readonlyList.includes(formItem.type)" label="只读">
            <el-switch v-model="formItem.props.readonly" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Password'" label="显示密码">
            <el-switch v-model="formItem.props.showPassword" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="clearables.includes(formItem.type)" label="可清理">
            <el-switch v-model="formItem.props.clearable" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="editables.includes(formItem.type)" label="可输入">
            <el-switch v-model="formItem.props.editable" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Textarea'" label="自动尺寸">
            <el-switch v-model="formItem.props.showAutoSize" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Textarea' && formItem.props.showAutoSize" label="最小行数">
            <el-input-number v-model="formItem.props.autosize.minRows" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Textarea' && formItem.props.showAutoSize" label="最大行数">
            <el-input-number v-model="formItem.props.autosize.maxRows" />
        </el-form-item>
        <el-form-item v-if="mins.includes(formItem.type)" label="最小">
            <el-input-number :min="0" v-model="formItem.props.min" />
        </el-form-item>
        <el-form-item v-if="maxs.includes(formItem.type)" label="最大">
            <el-input-number
                :min="formItem.type === 'Rate' ? formData[formItem.modelValue] : formData[formItem.props.min]"
                :max="formItem.type === 'Rate' ? 10 : Number.MAX_VALUE"
                v-model="formItem.props.max"
            />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Rate'" label="低分">
            <el-input-number :min="0" :max="formData[formItem.modelValue]" v-model="formItem.props.lowThreshold" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Rate'" label="高分">
            <el-input-number
                :min="formItem.props.lowThreshold"
                :max="formData[formItem.modelValue]"
                v-model="formItem.props.highThreshold"
            />
        </el-form-item>
        <el-form-item v-if="steps.includes(formItem.type)" label="步长">
            <el-input-number :min="0" v-model="formItem.props.step" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'TimeSelect'" label="时间间隔">
            <el-time-select v-model="formItem.props.step" start="00:00" end="12:00" step="00:30" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'TimeSelect'" label="开始时间">
            <el-time-select v-model="formItem.props.start" start="00:00" end="23:59" step="00:30" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'TimeSelect'" label="结束时间">
            <el-time-select
                v-model="formItem.props.end"
                :min-time="formItem.props.start"
                start="00:00"
                end="23:59"
                step="00:30"
            />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'TimeSelect'" label="最小时间">
            <el-time-select v-model="formItem.props.minTime" min-time="00:00" start="00:00" end="23:59" step="00:30" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'TimeSelect'" label="最大时间">
            <el-time-select
                v-model="formItem.props.maxTime"
                :min-time="formItem.props.minTime"
                start="00:00"
                end="23:59"
                step="00:30"
            />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'InputNumber'" label="精度">
            <el-input-number :min="0" :max="8" v-model="formItem.props.precision" />
        </el-form-item>
        <el-form-item v-if="borders.includes(formItem.type)" label="显示边框">
            <el-switch v-model="formItem.props.border" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'InputNumber'" label="控制按钮">
            <el-switch v-model="formItem.props.controls" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Rate'" label="半选">
            <el-switch v-model="formItem.props.allowHalf" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Rate'" label="颜色">
            <div style="display: flex; align-items: center">
                低:
                <el-color-picker v-model="formItem.props.colors[0]" />&nbsp;&nbsp; 中:
                <el-color-picker v-model="formItem.props.colors[1]" />&nbsp;&nbsp; 高:
                <el-color-picker v-model="formItem.props.colors[2]" />
            </div>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Rate'" label="默认颜色">
            <el-color-picker v-model="formItem.props.voidColor" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch'" label="边框颜色">
            <el-color-picker v-model="formItem.props.borderColor" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch'" label="打开颜色">
            <el-color-picker v-model="formItem.props.activeColor" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch'" label="关闭颜色">
            <el-color-picker v-model="formItem.props.inactiveColor" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Rate'" label="只读颜色">
            <el-color-picker v-model="formItem.props.disabledVoidColor" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Rate'" label="辅助文字">
            <el-switch
                v-model="formItem.props.showText"
                :active-value="true"
                :inactive-value="false"
                @change="showTextChange"
            />
        </el-form-item>
        <el-form-item v-if="multipleList.includes(formItem.type)" label="多选">
            <el-switch
                v-model="formItem.props.multiple"
                :active-value="true"
                :inactive-value="false"
                @change="multipleChange"
            />
        </el-form-item>
        <el-form-item v-if="multipleList.includes(formItem.type) && formItem.props.multiple" label="显示文字">
            <el-switch v-model="formItem.props.collapseTags" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="multipleList.includes(formItem.type) && formItem.props.multiple" label="选择数量">
            <el-input-number :min="0" v-model="formItem.props.multipleLimit" />
        </el-form-item>
        <el-form-item v-if="fitInputWidthList.includes(formItem.type)" label="同一宽度">
            <el-switch v-model="formItem.props.fitInputWidth" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="filterableList.includes(formItem.type)" label="可筛选">
            <el-switch v-model="formItem.props.filterable" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="filterableList.includes(formItem.type) && formItem.props.filterable" label="允许创建">
            <el-switch v-model="formItem.props.allowCreate" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="filterableList.includes(formItem.type) && formItem.props.filterable" label="无匹配">
            <el-input v-model="formItem.props.noMatchText" />
        </el-form-item>
        <div v-if="options.includes(formItem.type)">
            <el-divider>选项</el-divider>
            <div
                v-for="(option, i) in itemOptions"
                :key="i"
                style="margin-bottom: 10px; display: flex; align-items: center"
            >
                <el-input v-model="option.label" placeholder="选项名" style="width: 43%" />
                <el-input v-model="option.value" placeholder="选项值" style="width: 43%; margin-left: 5px" />
                <el-icon class="el-red-close" @click="removeOption(i)"><circle-close /></el-icon>
            </div>
            <el-button plain @click="insertOption"> 添加选项 </el-button>
        </div>
        <el-divider v-if="formItem.type === 'Rate' && formItem.props.showText">描述文字</el-divider>
        <div v-if="formItem.type === 'Rate' && formItem.props.showText">
            <el-form-item v-for="i in formItem.props.max" :label="i + '分'" :key="i">
                <el-input v-model="formItem.props.texts[i - 1]" />
            </el-form-item>
        </div>
        <el-form-item v-if="formItem.type === 'Rate'" label="显示分数">
            <el-switch
                v-model="formItem.props.showScore"
                :active-value="true"
                :inactive-value="false"
                @change="showScoreChange"
            />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Rate'" label="文字颜色">
            <el-color-picker v-model="formItem.props.textColor" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch'" label="宽度(px)">
            <el-input-number :min="0" v-model="formItem.props.width" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Container'" label="间隔">
            <el-input-number :min="0" v-model="formItem.props.gutter" />
        </el-form-item>

        <el-form-item v-if="formItem.type === 'Container'" label="垂直排列">
            <el-select v-model="formItem.props.align">
                <el-option
                    v-for="item in alignOptions"
                    :key="item.value + '+'"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>

        <el-form-item v-if="formItem.type === 'Container'" label="水平排列">
            <el-select v-model="formItem.props.justify">
                <el-option
                    v-for="item in justifyOptions"
                    :key="item.value + '+'"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <div v-if="formItem.type === 'Container'">
            <div v-for="(item, i) in formItem.cols" style="margin-bottom: 15px" :key="i">
                <el-divider>第{{ i + 1 }}列</el-divider>
                <el-form-item label="占据列数">
                    <el-input-number :min="0" v-model="item.props.span" />
                </el-form-item>
                <el-form-item label="左移格数">
                    <el-input-number :min="0" v-model="item.props.pull" />
                </el-form-item>
                <el-form-item label="右移格数">
                    <el-input-number :min="0" v-model="item.props.push" />
                </el-form-item>
                <el-form-item label="左侧格数">
                    <el-input-number :min="0" v-model="item.props.offset" />
                </el-form-item>
                <el-button plain @click="removeCol(i)"> 移除列 </el-button>
            </div>
            <el-button plain @click="addCol"> 添加列 </el-button>
        </div>

        <el-form-item v-if="formItem.type === 'Switch' || formItem.type === 'Button'" label="加载中">
            <el-switch v-model="formItem.props.loading" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Button'" label="朴素按钮">
            <el-switch v-model="formItem.props.plain" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Button'" label="圆角按钮">
            <el-switch v-model="formItem.props.round" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Button'" label="圆形按钮">
            <el-switch v-model="formItem.props.circle" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Slider'" label="输入框">
            <el-switch v-model="formItem.props.showInput" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Slider' && formItem.props.showInput" label="控制按钮">
            <el-switch v-model="formItem.props.showInputControls" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Slider'" label="toolTip">
            <el-switch v-model="formItem.props.showTooltip" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Color'" label="透明度">
            <el-switch v-model="formItem.props.showAlpha" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Color'" label="格式">
            <el-select v-model="formItem.props.colorFormat">
                <el-option
                    v-for="item in colorFormatOptions"
                    :key="item.value + '+'"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch'" label="点内显示">
            <el-switch v-model="formItem.props.inlinePrompt" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch'" label="提示">
            <el-button-group>
                <el-button plain @click="SwitchIconText(true)"> 图标 </el-button>
                <el-button plain @click="SwitchIconText(false)"> 文字 </el-button>
            </el-button-group>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && switchIconText" label="打开图标">
            <el-button plain @click="showSelectIconFun('activeIcon')"> 选择图标 </el-button>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Button'" label="按钮图标">
            <el-button plain @click="showSelectIconFun('icon')"> 选择图标 </el-button>
        </el-form-item>
        <el-form-item v-if="prefixIcons.includes(formItem.type)" label="前缀图标">
            <el-button plain @click="showSelectIconFun('prefixIcon')"> 选择图标 </el-button>
        </el-form-item>
        <el-form-item v-if="suffixIcons.includes(formItem.type)" label="后缀图标">
            <el-button plain @click="showSelectIconFun('suffixIcon')"> 选择图标 </el-button>
        </el-form-item>
        <el-form-item v-if="clearIcons.includes(formItem.type)" label="清除图标">
            <el-button plain @click="showSelectIconFun('clearIcon')"> 选择图标 </el-button>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && switchIconText" label="关闭图标">
            <el-button plain @click="showSelectIconFun('inactiveIcon')"> 选择图标 </el-button>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && !switchIconText" label="打开文字">
            <el-input v-model="formItem.props.activeText" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && !switchIconText" label="关闭文字">
            <el-input v-model="formItem.props.inactiveText" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch'" label="值类型">
            <el-button-group>
                <el-button plain @click="SwitchValueType(1)"> 字符 </el-button>
                <el-button plain @click="SwitchValueType(2)"> 布尔 </el-button>
                <el-button plain @click="SwitchValueType(3)"> 整形 </el-button>
            </el-button-group>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && switchValueType === 1" label="打开的值">
            <el-input v-model="formItem.props.activeValue" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && switchValueType === 1" label="关闭的值">
            <el-input v-model="formItem.props.inactiveValue" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && switchValueType === 2" label="打开的值">
            <el-select v-model="formItem.props.activeValue">
                <el-option
                    v-for="item in switchValueOptions"
                    :key="item.value + '_'"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && switchValueType === 2" label="关闭的值">
            <el-select v-model="formItem.props.inactiveValue">
                <el-option
                    v-for="item in switchValueOptions"
                    :key="item.value + '-'"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && switchValueType === 3" label="打开的值">
            <el-input-number :min="0" v-model="formItem.props.activeValue" />
        </el-form-item>
        <el-form-item v-if="formItem.type === 'Switch' && switchValueType === 3" label="关闭的值">
            <el-input-number :min="0" v-model="formItem.props.inactiveValue" />
        </el-form-item>
        <el-form-item v-if="!noRules.includes(formItem.type)" label="开启验证">
            <el-switch
                v-model="formItem.enableRule"
                :active-value="true"
                :inactive-value="false"
                @change="enableRuleChange"
            />
        </el-form-item>
        <!--<el-divider v-if="formItem.enableRule">请预览查看效果</el-divider>-->
        <div v-for="(item, i) in formItem.rules" :key="i">
            <div style="display: flex; align-items: center; justify-content: space-between">
                <div class="el-form-item__label" style="font-weight: bold">
                    {{ getTextByCheckType(item.checkType) }}
                </div>
                <el-icon class="el-red-close" @click="removeCheck(i)"><circle-close /></el-icon>
            </div>
            <el-form-item
                v-if="item.checkType === 'url' || item.checkType === 'date' || item.checkType === 'email'"
                label="检验类型"
            >
                <el-select v-model="item.type">
                    <el-option
                        v-for="item in checkTypeOptions"
                        :key="item.value + '-'"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item v-if="item.checkType === 'length'" label="最小长度">
                <el-input-number :min="0" v-model="item.min" />
            </el-form-item>
            <el-form-item v-if="item.checkType === 'length'" label="最大长度">
                <el-input-number :min="item.min" v-model="item.max" />
            </el-form-item>
            <el-form-item v-if="item.checkType === 'regexp'" label="正则">
                <el-input v-model="item.pattern" />
            </el-form-item>
            <el-form-item label="提示信息">
                <el-input v-model="item.message" />
            </el-form-item>
            <el-form-item label="触发方式">
                <el-radio-group v-model="item.trigger">
                    <el-radio label="change"> change </el-radio>
                    <el-radio label="blur"> blur </el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
        <el-button v-if="formItem.enableRule" plain @click="showSelectCheckType"> 添加验证 </el-button>
        <SelectIcons :dialog="showSelectIcon" @selectIcon="selectIcon" />
        <div style="height: 20px"></div>
        <el-dialog v-model="selectCheckTypeDialog" title="选择校验类型" append-to-body>
            <el-radio-group v-model="checkType">
                <el-radio :label="0"> 必填 </el-radio>
                <el-radio :label="1"> 正则 </el-radio>
                <el-radio :label="2"> 长度限制 </el-radio>
                <el-radio :label="3"> 邮箱格式 </el-radio>
                <el-radio :label="4"> url格式 </el-radio>
                <el-radio :label="5"> date格式 </el-radio>
            </el-radio-group>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="selectCheckTypeDialog = false">取消</el-button>
                    <el-button type="primary" @click="addRuleByType">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </el-form>
</template>

<style scoped>
.el-red-close {
    color: red;
    font-size: 22px;
    cursor: pointer;
    margin-left: 5px;
}
</style>
